import { defineComponent } from 'vue';
import styles from '../index.module.scss';
import { terminalHeaderProps } from '@/main/js/terminalAttribute';
import { TriggerClickType } from '../js/terminalTypes';

export default defineComponent({
  props: {
    ...terminalHeaderProps(),
    /** 是否钉上墙 */
    pinned: {
      type: Boolean
    },
    /** 是否可拖动 */
    draggable: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    const methods = {
      _triggerClick(key: TriggerClickType) {
        emit('header-click', key);
      }
    }
    return () => (
      <div class={styles.tHeader}>
        <h4 style='display: inline-block'>
          <span class={styles.tDisableSelect} style='cursor: pointer'>
            {props.title}
          </span>
        </h4>
        <ul class={styles.tShellDots}>
          <li class={[styles.shellDotItem, styles.tShellDotsRed]}>
            <svg
              class={styles.tShellDot}
              viewBox='0 0 1024 1024'
              version='1.1'
              xmlns='http://www.w3.org/2000/svg'
              width='10'
              height='10'>
              <path
                d='M544.448 499.2l284.576-284.576a32 32 0 0 0-45.248-45.248L499.2 453.952 214.624 169.376a32 32 0 0 0-45.248 45.248l284.576 284.576-284.576 284.576a32 32 0 0 0 45.248 45.248l284.576-284.576 284.576 284.576a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0-45.248L544.448 499.2z'
                fill='#1413139c'
              >
              </path>
            </svg>
          </li>
          <li class={[styles.shellDotItem, styles.tShellDotsYellow]}>
            <svg
              class={styles.tShellDot}
              viewBox='0 0 1024 1024'
              version='1.1'
              xmlns='http://www.w3.org/2000/svg'
              p-id='2762'
              width='10'
              height='10'
            >
              <path d='M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z' fill='#1413139c'></path>
            </svg>
          </li>
          <li class={[styles.shellDotItem, styles.tShellDotsGreen]} onClick={() => methods._triggerClick(TriggerClickType.fullscreen)}>
            <svg
              class={styles.tShellDot}
              viewBox='0 0 1024 1024'
              version='1.1'
              xmlns='http://www.w3.org/2000/svg'
              width='10'
              height='10'
            >
              <path
                d='M188.373333 128H384c23.573333 0 42.666667-19.093333 42.666667-42.666667s-19.093333-42.666667-42.666667-42.666666H85.333333C61.76 42.666667 42.666667 61.76 42.666667 85.333333v298.666667c0 23.573333 19.093333 42.666667 42.666666 42.666667s42.666667-19.093333 42.666667-42.666667V188.373333L396.170667 456.533333a42.730667 42.730667 0 0 0 60.362666 0 42.741333 42.741333 0 0 0 0-60.362666L188.373333 128zM938.666667 597.002667c-23.573333 0-42.666667 19.093333-42.666667 42.666666v195.626667l-268.309333-268.16c-16.746667-16.64-43.893333-16.64-60.544 0s-16.650667 43.893333 0 60.533333L835.317333 896h-195.626666c-23.584 0-42.666667 19.093333-42.666667 42.666667s19.082667 42.666667 42.666667 42.666666h298.666666C961.92 981.333333 981.333333 961.92 981.333333 938.336v-298.666667c0-23.573333-19.093333-42.666667-42.666666-42.666666z'
                fill='#1413139c'
              ></path>
            </svg>
          </li>
        </ul>
        {props.draggable && (
          <div class={styles.tHeaderPin} onClick={() => methods._triggerClick(TriggerClickType.pin)}>
            {props.pinned ? (
              <svg
                class='icon'
                viewBox='0 0 1025 1024'
                version='1.1'
                xmlns='http://www.w3.org/2000/svg'
                width='18'
                height='18'>
                <path d='M320 839.68l-238.592 174.08c-8.704 6.656-19.456 9.728-29.696 9.728-12.8 0-26.112-5.12-35.84-14.848-17.92-17.92-20.48-46.08-5.12-66.56l212.992-288.256L56.32 487.424C39.936 471.04 36.864 445.44 48.128 425.472c8.192-12.8 76.8-112.64 229.376-75.264 2.56 0.512 5.12 0.512 8.192 1.024 6.144 0.512 13.312 1.024 20.992 2.56 32.256 5.12 89.6-20.48 139.264-62.976 47.616-40.448 78.336-87.552 78.336-120.32 0-7.68 0-15.872-0.512-23.552-1.024-30.72-3.072-77.824 31.744-112.64 41.472-41.472 107.52-45.056 153.088-7.68 1.024 0.512 1.536 1.536 2.56 2.56 24.576 24.064 276.48 275.968 279.04 278.528 21.504 21.504 33.792 50.688 33.792 81.408s-11.776 59.392-33.792 80.896c-34.816 34.816-82.432 33.28-113.664 31.744-7.168 0-15.36-0.512-23.04-0.512-30.72 0-67.584 21.504-103.936 60.928-50.688 55.296-81.92 126.464-79.36 158.72 1.024 10.24 3.072 28.16 3.584 30.72 36.864 149.504-62.976 217.6-74.752 225.28-20.48 12.288-46.592 9.216-62.976-7.168l-165.376-165.376-50.688 35.328z'
                  fill='#daf3ef'
                />
              </svg>
            ) : (
              <svg
                t='1683166931100'
                class='icon'
                viewBox='0 0 1025 1024'
                version='1.1'
                xmlns='http://www.w3.org/2000/svg'
                width='18'
                height='18'
              >
                <path
                  d='M51.196068 1024c-13.021992 0-26.0184-5.091113-36.021541-15.094254-18.113104-18.164271-20.262117-46.050265-5.091113-66.337966l213.059228-288.325828-166.983379-166.983379C39.862586 470.961896 36.639068 445.48075 48.305135 425.2698c7.982046-12.612656 76.699275-112.82315 229.483822-75.010766 2.532765 0.307002 5.270197 0.537253 8.212297 0.793088 6.267953 0.537253 13.277827 1.17684 20.87612 2.404847 32.33752 5.244614 89.516599-20.722619 139.148552-63.037697 47.559691-40.49865 78.285451-87.751339 78.285451-120.344693 0-7.57271-0.179084-15.631507-0.358169-23.536802-1.279174-30.623426-3.223519-77.697031 31.979351-112.874317 41.649907-41.701074 107.552953-45.05251 153.270633-7.854129 0.921005 0.741921 1.76526 1.535009 2.583932 2.379264l-0.025583 0c24.585725 24.048472 276.608594 275.815506 279.243692 278.476188 21.694792 21.694792 33.642277 50.527374 33.693444 81.176384 0.025583 30.674593-11.896319 59.456009-33.539943 81.099634-35.023785 35.049369-82.353225 33.053857-113.565071 31.723516-7.393626-0.153501-15.478006-0.332585-23.025133-0.332585-30.828094 0-67.69389 21.592458-103.715431 60.760767-50.808793 55.260318-82.09739 126.63823-79.411124 158.617581 1.125673 10.258976 3.223519 28.37208 3.607271 30.930428 36.891379 149.612195-63.114447 217.843339-74.627013 225.109047-20.697036 12.484739-46.357267 9.389137-63.012113-7.240125l-178.393611-178.393611c-10.003141-10.003141-10.003141-26.171901 0-36.175042s26.171901-10.003141 36.175042 0l178.393611 178.393611c7.854129-5.091113 80.101878-54.646315 51.320462-171.76749-0.51167-2.35368-3.044434-23.562386-4.374775-35.970374-4.298025-51.115795 35.586622-136.027367 92.688951-198.118475 32.439854-35.254036 83.27423-77.287695 141.348731-77.287695 7.905296 0 16.399011 0.179084 24.662475 0.358169 32.41427 1.355924 58.048918 0.972172 75.77827-16.782763 11.973069-11.973069 18.548024-27.885994 18.548024-44.847842-0.025583-17.013015-6.677288-33.00269-18.701524-45.05251C952.220677 340.23031 683.849964 72.243349 675.944668 64.645055c-24.278723-19.724864-60.7096-17.882853-83.785899 5.21903-17.908437 17.908437-18.317772 43.491917-17.013015 75.087516 0.204668 8.800717 0.383752 17.243266 0.383752 25.148562 0 48.378362-35.995957 107.936705-96.270638 159.282751-49.478452 42.135993-122.979792 83.811483-180.491457 74.60143-6.293536-1.023339-12.049819-1.509425-17.192099-1.944345-3.325852-0.281418-6.421454-0.562837-9.312387-0.921005-2.456014-0.07675-4.860861-0.537253-7.188958-1.304758-117.760762-29.037251-167.597382 43.44075-172.893163 51.806549l182.742803 182.026466c8.954218 8.954218 10.028724 23.101883 2.481598 33.309692L51.170485 973.114457l238.617125-174.530506c11.435816-8.365798 27.425491-5.80745 35.740123 5.602782s5.80745 27.399908-5.602782 35.714539l-238.821793 174.12117C72.148939 1020.699731 61.685295 1024 51.196068 1024z'
                  fill='#e6e6e6'
                />
              </svg>
            )}
          </div>
        )}
      </div>
    )
  }
})
